<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>商品后台管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/course_category.css">
</head>

<body>
    <nav class="navbar">
        <div class="container" style="height: 80px;background: #58a3f9">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img src="image/easy-pay.png">
                </a>
            </div>
            <ul class="nav navbar-nav navbar-right" style="margin-top: 30px">
                <li><a href="#"><span class="inner">首页</span></a></li>
                <li>
                    <a href="#">
                        <span class="inner">商品管理</span></a>
                </li>
                <li>
                    <a href="#">
                        <span class="inner">购物车管理</span>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <span class="inner">用户管理</span></a>
                </li>
            </ul>

        </div><!-- /.container-fluid -->
    </nav>
    <div style="min-height: 400px">
        <div class="container">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>商品管理-商品列表</h4>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th style="width: 15%" class="text-center">商品编号</th>
                                <th style="width: 65%" class="text-center">商品标题</th>
                                <th style="width: 20%" class="text-center">编辑</th>
                            </tr>
                        </thead>
                        <tbody id="mytbody">
                        </tbody>
                    </table>
                    <div>
                        <button class="btn btn-primary">添加商品</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <p class="text-center">易购集团</p>
            <p class="text-center">Copyright 2019</p>
        </div>
    </footer>
    <script src="./js/axios.min.js"></script>
    <script>
        var mytbody = document.getElementById('mytbody');
        list();
        function list() {
            axios({
                method: 'post',
                url: 'http://127.0.0.1:8080/h7/goods/list'
            })
                .then(res => {
                    if (res.status === 200) {
                        if (res.data.success) {
                            for (var i in res.data.list) {
                                var tr =
                                    `
                        <tr>
                            <td class="text-center">${res.data.list[i].id}</td>
                            <td class="text-left">${res.data.list[i].title}</td>
                            <td class="text-center">
                            <button class="btn btn-primary btn-sm">详细</button>   
                            <button class="btn btn-primary btn-sm">编辑</button>
                            <button class="btn btn-primary btn-sm" onclick="deleteGoods(${res.data.list[i].id})">删除</button>
                            </td>
                            </tr>`
                                mytbody.innerHTML += tr;
                            }
                        }
                    }
                })
        }
        function deleteGoods(id) {
            if (confirm('确定删除该商品吗?')) {
                console.log(id)
                mytbody.innerHTML = '';
                axios.post('http://127.0.0.1:8080/h7/goods/deleteGoods', { id: id })
                    .then(res => {
                        if (res.status === 200) {
                            console.log(res.data)
                            list();
                        }
                    })
            }
        }
    </script>
</body>

</html>